<template>
	<view class="qdbox">
		<view class="share">
			<rf-tag type="gray" size="small" tui-tag-class="tui-tag-share tui-size" shape="circleLeft">
				<button class="share-btn" open-type="share" :class="'text-' + themeColor.name" @tap.stop="share()">
					<text class="iconfont iconfenxiang"></text>
					<text class="tui-share-text tui-gray">分享</text>
				</button>
			</rf-tag>
		</view>
		<!-- 头部 -->
		<view class="swiper-box" v-for="(content,index) in tabBars" :key="index">
			<image src="../../../static/user-bg.jpg" mode=""></image>
			<view class="swiper_left">
				<!-- :class="'text-' + themeColor.name" -->
				<view class="swiper_top" ><text class="swiper_title" >{{content.title}}</text></view>
				<view class="swiper_content">
					<view class="swiper_home">{{content.home}}</view>
					<view class="swiper_time">发布时间：{{content.time}}</view>
				</view>
			</view>
			
		</view>
		<view class="center-box">
			<!-- <view class="center-top">活动时间：2021-01-12 ~ 2021-01-12</view> -->
		</view>
		<!-- 活动详情渲染 -->
		<!-- @tap="toggleTab(tabContent.id)" -->
		<view class="head-box" :class="{'active': tabIndex==tabContent.id}" v-for="(item,index) in tabContent" :key="index+1">
			<view class="head-title" :class="'text-' + themeColor.name">{{item.title}}</view>
			<text class="head-xiahuaxian"></text>
			<view class="head-text">{{item.text}}</view>
			<!-- view class="head-text">{{item.text}}</view>
			<view class="head-text">{{item.text}}</view> -->
			
		</view>
		<view class="swiper_center" :class="'text-' + themeColor.name" v-for="(content,index) in tabBars" :key="index+2">
			<view class="swiper_Home">{{content.home}}</view>
			<view class="swiper_Time">{{content.time}}</view>
		</view>
		
		<!-- button -->
		<view class="add-btn-wrapper">
			<button class="add-btn" :class="'bg-' + themeColor.name" @tap="qdCome">活动签到</button>
		</view>
	</view>

</template>

<script>
	import {
		notifyAnnounceView,
		getNewsInfo,
		getActivityInfo
	} from '@/api/basic';
	import moment from '@/common/moment';
	import iConfig from '@/config/index.config.js';
	String.prototype.replaceAll = function(s1, s2) {
		return this.replace(new RegExp(s1, 'gm'), s2);
	};
	export default {
		data() {
			return {
				// 版本所有
				// appName: this.$mSettingConfig.appName,

				tabIndex: 0, //选中标签栏的序列
				tabBars: [{
					title: '"喜迎新年，乐做手工"创意先祖第二节',
					home: '斗门镇居家养老院',
					name: '全部',
					time: '2021-1-12',
					news: '活动详情',
					id: '0'
				}, ],
				tabContent: [{
					title: '尊老爱幼',
					text: '尊老敬老是中华民族的传统美德，也是全面贯彻落实科学发展观、构建和谐社会的重要内容。经常开展敬老宣传教育活动，对增强全社会的老龄意识和敬老意识，营造敬老养老助老的浓厚氛围，激发老年人发挥余热、奉献社会的热情，促进全市经济社会更好更快发展具有重要意义。',
				}]
			}
		},

		// // 下拉刷新
		// onPullDownRefresh() {
		// 	this.getDetail('refresh');
		// },

		methods: {
			qdCome() {
				uni.showToast({
					// 弹出框的标题
					title: '你点击了签到！',
					// 弹出框的图标，不想设置图标时请给none
				})
			},
			// 分享商品
			share() {
				// #ifdef H5
				if (this.$mPayment.isWechat()) {
					this.shareClass = 'show';
				} else {
					this.$mHelper.h5Copy(this.currentUrl);
				}
				// #endif
				// #ifdef APP-PLUS
				// console.log("this.currentUrl: ", this.currentUrl);
				// console.log("this.$mConstDataConfig.appName: ", this.$mConstDataConfig.appName);
				// console.log("this.baseUrl: ", this.baseUrl + '/upload/' + this.announceDetail.imgPath);
				this.$mHelper.handleAppShare(this.currentUrl, this.$mConstDataConfig.appName, this.announceDetail.title, this.baseUrl +
					'/upload/' + this.announceDetail.imgPath);
				// #endif
			},
		},
		onLoad(options) {
			this.id = options.id;
			console.log('传过来的id值为：' + options.id);
			// let that = this
			// uni.request({
			// url:`${this.$serverUrl}/pages/oldxue/oldBox/oldvideo/${this.id}/`,
			// header:{
			// 'Authorization': this.uerInfo.token
			// },
			// success(res){
			// console.log(res)
			// that.opportunity = res.data;
			// }
			// })
		},
		onShareAppMessage() {
			return {
				title: this.banner.title,
				path: `/pages/index/notice/detail?id=${this.id}`
			};
		},
		
	}
</script>

<style scoped>
	page{
	background-color: #FFFFFF;
	}
	
	.share{
		background-color: #EAEEF1;
	}
	
	.swiper-box{
		width: 100%;
		height: 250px;
		display: flex;
		flex-direction: column;
		position: relative;
	}
	
	.swiper-box image{
		width: 100%;
		height: 150px;
		border-radius: 2%;
	}
	
	.swiper_content{
		color: #606266;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.swiper_top{
		width: 100%;
		height: 30px;
		position: absolute;
		bottom: 100px;
		background-color: rgba(0,0,0,0.2);
	}
	
	.swiper_left{
		margin: 10upx 0 0 0;
	}
	
	.swiper_left .swiper_title{
		color: #fff;
		font-size: 16px;
		font-weight: 500;
		line-height: 30px;
		margin: 0 10upx;
		
	}
	
	.swiper_content .swiper_home{
		font-size: 16px;
		font-weight: 400;
	}
	
	.swiper_time{
		font-size: 15px;
	}
	
	.center-box {
		width: 100%;
		background-color: #fff;
	}

	.center-top {
		font-size: 18px;
		margin-left: 10upx;
	}

	.center-center {
		margin-left: 10upx;
	}

	.center-bottom {
		margin-left: 10upx;
	}

	.head-box {
		display: flex;
		flex-direction: column;
		margin-top: -50px;
		/* position: absolute; */
		/* top: 250px; */
		/* bottom: 0; */
		/* background-color: #fff; */
		/* display: flex;
		flex-direction: column;
		align-items: center; */
	}

	.head-title {
		margin-top: 10upx;
		font-size: 20px;
		font-weight: 500;
		text-align: center;
	}

	.head-text {
		margin: 0 5upx 20upx 5upx;
		font-size: 16px;
	}

	.swiper_center{
		position: absolute;
		right: 10upx;
	}

	.swiper_Home{
		font-size: 16px;
		font-weight: 800;
	}

	.swiper_center .swiper_Time{
		position: absolute;
		right: 0;
	}

	.button {
		width: 100%;
		height: 50px;
		border-radius: 10% 10% 0 0;
		background-color: #ff5500;
		position: fixed;
		bottom: 0;
		z-index: 10;
	}

	.button .text {
		display: inherit;
		font-size: 16px;
		font-weight: none;
		color: #fff;
		text-align: center;
		line-height: 50px;

	}
</style>
